<!--
 @Description 人物信息组件（头像+姓名条）竖版
 @author hemengxia
 @date 2022/10/18
-->

<template>
  <div v-if="list.length>0" class="v-figure-style-one" :style="{ 'margin-top': top}">
    <cell-title
      v-if="isShowModuleName"
      :title="moduleName"
      :option="option"
      :hide-desc="option.isMore ==='2'"
      :style="{
        'background-color': option.backgroundColor,
        'border-radius':
          px2rem(option.radiusSize) + ' ' + px2rem(option.radiusSize) + ' 0 0'
      }"
    />
    <ul
      :style="{
        'padding-left': spacing,
        'padding-right': spacing,
      }"
    >
      <li v-for="(item,index) in list" :key="index" @click="toDetail(item)">
        <van-image
          :src="setImgPath(getMapping(item, 'headImg'), getMapping(item, 'headImgURL'))"
          :fit="imgType"
        >
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
          <template v-slot:error>
            <img src="../../images/base/default-placeholder.png">
          </template>
        </van-image>
        <p class="user-name etc">{{ isInitData ? getMapping(item, 'name') : item.name }}</p>
        <p class="title etc2"> {{ isInitData ? getMapping(item, 'intro') : item.intro }}</p>
        <div class="btn">查看详情</div>
      </li>
    </ul>
  </div>
</template>
<script>
import mixins from './../mixins'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'
export default {
  name: 'VFigureStyleOne',
  components: {
    CellTitle
  },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      defaultList: [{
        name: '姓名',
        headImg: '',
        headImgURL: '',
        intro: '简介'
      },
      {
        name: '姓名',
        headImg: '',
        headImgURL: '',
        intro: '简介'
      }, {
        name: '姓名',
        headImg: '',
        headImgURL: '',
        intro: '简介'
      }],
      pageSize: 4
    }
  },
  async created() {
    if (this.isInitData) {
      this.pageSize = this.option.pageSize || 4
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  methods: {
    setData(result) {
      this.list = result.dataList?.data?.rows || []
    }
  }
}
</script>
<style lang="scss">
@import '~@/styles/utility/rem.scss';
@import '~@/styles/mixin.scss';

.v-figure-style-one {
  position: relative;
  padding: 0 0 rem(20);

  p {
    margin: 0;
  }

  .module-name {
    color: #333;
    font-size: rem(30);
    padding: rem(30);
    font-weight: bold;
  }

  > ul {
    width: rem(750);
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    li {
      background-color: #ffff;
      border-radius: rem(16);
      width: rem(300);
      flex: 0 0 auto;
      padding: rem(30) rem(20);
      text-align: center;
      margin-right: rem(30);

      &:last-child {
        margin-right: 0;
      }

      .van-image {

        width: rem(120);
        height: rem(120);

        > img {
          border-radius: 50%;
        }

        .van-image__error, .van-image__loading {
          background: #dadada;
          border-radius: 50%;

          > img {

            width: rem(120);
            height: rem(120);
          }

        }
      }

      .user-name {
        font-size: rem(30);
        padding: 0 rem(20);
        margin-top: rem(24);
        color: #333;
        font-weight: bold;

      }

      .title {
        margin-top: rem(18);
        font-size: rem(24);
        padding: 0 rem(20);
        color: #666;

      }

      .btn {
        width: rem(140);
        height: rem(60);
        border-radius: rem(30);
        margin: rem(30) auto 0;
        color: #fff;
        font-size: rem(24);
        text-align: center;
        line-height: rem(60);
        @include bg-color($mainColor);
      }
    }
  }
}
</style>
